<template>
    <div class="Box">
        <p>{{ props.title }}</p>
        <p>
            <span v-show="props.desc">{{ props.desc }}</span>
            <span><img src="@/assets/videoIcon/PlayBlack.png" >{{ formatNum(props.view) }}</span>
            <span><img src="@/assets/videoIcon/danmaku.png" >{{ formatNum(props.danmaku) }}</span>
            <span>{{ formatTime(props.ctime) }}</span>
            <span><img src="@/assets/videoIcon/no.png" >未经作者授权，禁止转载</span>
        </p>
    </div> 
</template>
<script lang="ts" setup>
import { formatNum,formatTime } from '@/utils/format'
interface Props{
    title:string
    view:number
    danmaku:number
    ctime:number
    desc?:string
}
const props = defineProps<Props>()
</script>

<style lang="scss" scoped>
p{
    padding: 0;
    margin: 0;
}
.Box{
    height: 10%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    & p:nth-child(1){
        width: 100%;
        color: #18191C;
        text-align: left;
        font-size: 20px;
        @include noWrap;
    }
    & p:nth-child(2){
        height: 30px;
        color: #9499A0;
        font-size: 13px;
        display: flex;
        justify-content: start;
        align-items: center;
    }
    & p:nth-child(2) span{
        margin-right: 15px;
        @include flexRowCenter;
    }
    & p:nth-child(2) span:nth-child(1){
        margin-right: 15px;
        @include flexRowCenter;
        background-color: #fd79a8;
        color: #e84393;
    }
    & p:nth-child(2) img{
        margin-right: 5px;
        padding-bottom: 5px;
        width: 18px;
        height: 18px;
    }
    & p:nth-child(2) span:nth-child(3) img{
        width: 23px;
        height: 26px;
    }
}
</style>